<template>
  <div>
    <!-- 题目名称 -->
    <el-row>
      <h3>{{problemInfo.problemName}}</h3>
    </el-row>

    <el-row>
      <!-- 时间、内存限制 -->
      <div>
        <el-tag>时间限制:{{problemInfo.timeLimit}} MS</el-tag>&nbsp
        <el-tag type="success">内存限制：{{problemInfo.spaceLimit}}KB</el-tag>
      </div>

      <!-- 操作按钮组 -->
      <div class="optButton">
        <el-button size="mini" @click="toCommitPage" type="primary">提交</el-button>
        <el-button size="mini" type="warning">判题记录</el-button>
        <el-button size="mini" type="info">统计信息</el-button>
      </div>
    </el-row>


    <!-- 题目描述 -->
    <el-row>
      <el-col :span="2"><div class="spanconent"></div></el-col>
      <el-col :span="20">
        <el-card>
          <div style="margin:-25px -10px; " slot="header" align="left">
            <h5>题目描述</h5>
          </div>
          <p>
            {{problemInfo.problemDesc}}
          </p>
        </el-card>
      </el-col>
      <el-col :span="2"><div class="spanconent"></div></el-col>
    </el-row>
    
    <!-- 输入格式 -->
    <el-row>
      <el-col :span="2"><div class="spanconent"></div></el-col>
      <el-col :span="20">
        <el-card>
          <div style="margin:-25px -10px; " slot="header" align="left">
            <h5>输入格式</h5>
          </div>
          <p>
            {{problemInfo.problemInput}}
          </p>
        </el-card>
      </el-col>
      <el-col :span="2"><div class="spanconent"></div></el-col>
    </el-row>

    <!-- 输出格式 -->
    <el-row>
      <el-col :span="2"><div class="spanconent"></div></el-col>
      <el-col :span="20">
        <el-card>
          <div style="margin:-25px -10px; " slot="header" align="left">
            <h5>输出格式</h5>
          </div>
          <p>
            {{problemInfo.problemOut}}
          </p>
        </el-card>
      </el-col>
      <el-col :span="2"><div class="spanconent"></div></el-col>
    </el-row>

    <!-- 样例输入 -->
    <el-row>    
      <el-col :span="2"><div class="spanconent"></div></el-col>
      <el-col :span="20">
        <el-card>
          <div style="margin:-25px -10px; " slot="header" align="left">
            <h5>样例输入</h5>
          </div>
          <pre style="margin-top: 0; margin-bottom: 0; ">
            <code class="lang-plain">
                {{problemInfo.sampleInput}}
            </code>
        </pre>
        </el-card>
      </el-col>
      <el-col :span="2"><div class="spanconent"></div></el-col>
    </el-row>

    <!-- 样例输出 -->
    <el-row>
      <el-col :span="2"><div class="spanconent"></div></el-col>
      <el-col :span="20">
        <el-card>
          <div style="margin:-25px -10px; " slot="header" align="left">
            <h5>样例输出</h5>
          </div>
          <pre style="margin-top: 0; margin-bottom: 0; ">
                <code class="lang-plain">
                    {{problemInfo.sampleOutput}}
                </code>
          </pre>
        </el-card>
      </el-col>
      <el-col :span="2"><div class="spanconent"></div></el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // 获取传递过来的题号 Id
      problemId: 0,

      problemInfo:{}
      
      
    };
  },

  methods: {
      // 点击提交按钮到提交代码页面
      toCommitPage(){
          // 通过路由跳转页面
          this.$router.push('/submitpage/'+this.problemId)
      },

      // 获取题目的信息
      async getProblemInfo(){

        const {data:res} = await this.$http.get("problem/get-by-id/"+this.problemId)
        
        if(res.meta.code !== 200){
          return this.$message.error('获取数据失败')
        }

        this.problemInfo =  res.data
        console.log(res);
      }
  },

  created() {
    this.problemId = this.$route.params.id
    this.getProblemInfo();
  }
};
</script>

<style scoped>
.optButton {
  margin-top: 10px;
}

pre {
    font-family: monospace,monospace;
    font-size: 1em;
    tab-size: 4;
    overflow: auto;
    white-space: pre;
}

code {
    font-family: "Fira Mono","Monaco","Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace!important;
}
</style>
